<template>
  <div id="invoiceInfoPage">
    <div class="content">
      <div class="listDiv">
        <div class="title">抬头类型</div>

        <div class="selectDiv" @click="clickCompany">
            <img
                    :src="isSelectCompany ? checkboxSelect : checkboxDefault"
                    class="chceckImg"
            />
          <div :class="{title:isSelectCompany,unselectTitle:!isSelectCompany}">公司抬头</div>
        </div>

        <div class="selectDiv" @click="clickPerson">
            <img
                    :src="isSelectCompany ? checkboxDefault : checkboxSelect"
                    class="chceckImg"
            />
          <div :class="{title:!isSelectCompany,unselectTitle:isSelectCompany}">个人</div>
        </div>
      </div>

      <div class="listDiv">
        <div class="title">发票抬头</div>
        <input placeholder="请填写发票抬头" v-model="invoiceRise"/>
      </div>
      <div class="listDiv" v-show="isSelectCompany">
        <div class="title">税号</div>
        <input placeholder="请填写纳税人识别码" v-model="taxNum"/>
      </div>

      <div class="listDiv">
        <div class="title">总金额</div>
        <div class="money">{{price}}元</div>
      </div>

      <div :class="{listDiv:true}" v-show="isSelectCompany">
        <div class="title">更多内容</div>
        <van-field rows="1" type="textarea" autosize placeholder="请填写备注、地址等(非必填)" class="vanField" v-model="moreInfo"
                   input-align="right"/>
        <!--<input placeholder="请填写备注、地址等(非必填)" v-model="moreInfo"/>-->
      </div>
      <div class="listDiv listDivNoBorder">
        <div class="title">电子邮箱</div>
        <input placeholder="向于用您发送电子发票" v-model="email"/>
      </div>


    </div>

      <div class="button" @click="submit">提交</div>

  </div>
</template>

<script>

  import {api_invoiceCreate} from "@/service/api/repair"

export default {
  name: "InvoiceInfoPage",
  data() {
    return {
        checkboxSelect: require("@/images/icon/checkbox_select.png"),
        checkboxDefault: require("@/images/icon/checkbox_default.png"),
        isSelectCompany: true,
        invoiceRise:'',
        taxNum:'',
        moreInfo:'',
        email:'',
        orderids: this.$route.query.orderids,
        price: this.$route.query.price,
    };
  },
    methods:{
        clickCompany(){
            this.isSelectCompany = true;
        },
        clickPerson(){
            this.isSelectCompany = false;
        },
        submit(){
            if (this.invoiceRise === ''){
                this.$toast('请填写发票抬头');
                return;
            }

            if (this.isSelectCompany){
                if (this.taxNum === ''){
                    this.$toast('请填写税号');
                    return;
                }
            }

            if (this.email === ''){
                this.$toast('请填写电子邮箱');
                return;
            }


            var data = {
                orderIds:this.orderids,
                email:this.email,
                rise:this.invoiceRise
            };

            if (this.isSelectCompany){
                data["type"]="COMPANY";
                data["remark"]=this.moreInfo;
                data["num"]=this.taxNum;

            }else {
                data["type"]="PERSONAL";
            }

            api_invoiceCreate(data).then(()=>{
                this.$toast('开票提交成功');
                this.$router.back();
            }).catch((error)=>{
                this.$toast(error.message);
            });


        }

    },
    computed:{
        moreinfoCellShowBottomPadding(){
            if (this.moreInfo){
                return false;
            } else {
                return true;
            }
        }
    }
};
</script>

<style scoped>
#invoiceInfoPage {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  z-index: 200;
  overflow: auto;
  background-color: #f6f8fb;
}
.content {
  margin-left: 1.3333333333333333rem;
  margin-right: 1.3333333333333333rem;
  margin-top: 1.3333333333333333rem;
  background-color: white;
}
.listDiv {
  margin: 0 1.3333333333333333rem;
  border-bottom: 0.5px solid #f0f1f5;

  /*height: 3.533333333333333rem;*/

  padding: 1.1rem 0rem;

  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.listDivNoButtomPadding{
  padding-bottom: 1px;

}
.listDivNoBorder {
  border-bottom: 0px solid #f0f1f5;

}

.title {
  height: 1.4rem;
  font-size: 0.9rem;
  font-family: PingFangSC-Regular, PingFangSC;
  font-weight: 400;
  color: rgba(18, 28, 50, 1);
  line-height: 1.4rem;
  flex-shrink: 0;
}
input {
  text-align: right;
  width: 13rem;
  height: 1.4rem;
  font-size: 0.9rem;
  font-family: PingFangSC-Light, PingFangSC;
  font-weight: 300;
  line-height: 1.4rem;

}
.money {
  height: 1.4rem;
  font-size: 0.9rem;
  font-family: PingFangSC-Light, PingFangSC;
  font-weight: 300;
  color: rgba(242, 62, 84, 1);
  line-height: 1.4rem;
}
.unselectTitle {
  height: 1.4rem;
  font-size: 1rem;
  font-family: PingFangSC-Light, PingFangSC;
  font-weight: 300;
  color: rgba(191, 195, 205, 1);
  line-height: 1.4rem;
}
.selectDiv{
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
}
.chceckImg{
    width: 1.1rem;
    height: 1.1rem;
    margin-right: 0.333rem;
}

.button {
    margin-left: 1.3333333333333333rem;
    margin-right: 1.3333333333333333rem;
    margin-top: 1.3333333333333333rem;


    height:3.2666666666666666rem;
    background: #397be6;
    border-radius: 1.6333333333333333rem;

    font-size:1.0666666666666667rem;
    font-family:PingFangSC-Regular,PingFangSC;
    font-weight:400;
    color:rgba(255,255,255,1);
    line-height:1.5rem;



    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}



.listDiv >>> textarea {
  font-size: 0.9rem;
  font-family: PingFangSC-Light, PingFangSC;
  font-weight: 300;
  /*line-height: 1.4rem;*/

}

.listDiv >>> textarea::-webkit-input-placeholder {
  font-size: 0.8666666666666667rem;
  font-family: PingFangSC-Regular, PingFangSC;
  font-weight: 300;
  color: #bfc3cd;
  /*line-height: 1.2333333333333334rem;*/
  height: 24px;

}

.listDiv >>> textarea::-moz-placeholder {
  font-size: 0.8666666666666667rem;
  font-family: PingFangSC-Regular, PingFangSC;
  font-weight: 300;
  color: #bfc3cd;
  height: 24px;

  /*line-height: 1.2333333333333334rem;*/
}
.listDiv >>> textarea:-ms-input-placeholder {
  font-size: 0.8666666666666667rem;
  font-family: PingFangSC-Regular, PingFangSC;
  font-weight: 300;
  color: #bfc3cd;
  height: 24px;

  /*line-height: 1.2333333333333334rem;*/
}
.listDiv >>> .van-cell {
  padding: 0;
  padding-left: 20px;
}
</style>
